<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
		<link rel="stylesheet" type="text/css" href="css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/vip-order.css"/>
		<link rel="stylesheet" type="text/css" href="css/validform.css"/>
		<script src="js/jquery-2.2.3 (1).js"></script>
		<script src="js/public.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script src="js/validform.js"></script>
	</head>
	<body>
		<div class="shipin-datails">
			<div class="con">
				<div class="inner">
					<i></i>
				    <span>当前位置： 会员中心&gt; 我的订单</span>
				</div>
			</div>
		</div>
		<div class="wiezhi">
			   <div class="con">
				  <span>当前位置： 会员中心 &gt; 我的订单</span>
			   </div>
		    </div>
	    <!--会员页的主要内容-->
	    <div class="wrapper">
	    	<aside>
	    	    <div class="con">
	    	    	<div class="title">
	    	    		<h2>个人中心</h2><input type="radio" /><span></span>
	    	    	</div>
	    	        <ul class="first">
	    	    	   <li><a href="vip.html">个人信息</a></li>
	    	    	   <li><a href="vip-gaimima.html">密码修改</a></li>
	    	        </ul>
	    	        <div class="title">
	    	        	<h2>系统信息</h2><input type="radio" /><span></span>
	    	        </div>
	    	        <ul class="first">
	    	    	  <li class="active"><a href="vip-order.html">我的订单</a></li>
	    	    	  <li><a href="vip-address.html">收货地址</a></li>
	    	       </ul>
	    	    </div>
	    	</aside>
	    	<div class="content">
	    		<div class="hd">
	    			<h2>
	    				<span class="active"><a href="#">交易中订单</a></span>
	    				<span><a href="#">已成交订单</a></span>
	    				<span><a href="#">已取消订单</a></span>
	    			</h2>
	    		</div>
	    	    <table id="0">
	    	    	<thead>
	    	    		<tr>
	    	    			<th width="25%">订单号</th>
	    	    			<th width="">状态</th>
	    	    			<th>金额</th>
	    	    			<th width="25%">下单时间</th>
	    	    			<th>操作</th>
	    	    		</tr>
	    	    	</thead>
	    	    	<tbody>
	    	    		<tr>
	    	    			<td>
	    	    				<div class="top">
	    	    					<img src="img/595c55ab382b0.jpg" />
	    	    					<span>电吉他初级</span>
	    	    				</div>
	    	    				<p>订单号:06147521466235</p>
	    	    			</td>
	    	    			<td>
	    	    				<p>已付款</p>
	    	    				<p>待到货</p>
	    	    			</td>
	    	    			<td>&yen;150.00</td>
	    	    			<td>2017.12.19 8:05</td>
	    	    			<td>
	    	    				<!--<p><a href="">查看订单</a></p>-->
	    	    				<button>确认收货</button>
	    	    			</td>
	    	    		</tr>
	    	    	</tbody>
	    	    </table>
	    	    <table id="1"style="display: none;">
	    	    	<thead>
	    	    		<tr>
	    	    			<th width="25%">订单号</th>
	    	    			<th width="">状态</th>
	    	    			<th>金额</th>
	    	    			<th width="25%">下单时间</th>
	    	    			<th>操作</th>
	    	    		</tr>
	    	    	</thead>
	    	    	<tbody>
	    	    		<tr>
	    	    			<td>
	    	    				<div class="top">
	    	    					<img src="img/595c55ab382b0.jpg" />
	    	    					<span>电吉他中级</span>
	    	    				</div>
	    	    				<p>订单号:06147521466235</p>
	    	    			</td>
	    	    			<td>
	    	    				<p>已付款</p>
	    	    				<p>已到货</p>
	    	    			</td>
	    	    			<td>&yen;150.00</td>
	    	    			<td>2017.12.19 8:05</td>
	    	    			<td>
	    	    				<!--<p><a href="">查看订单</a></p>-->
	    	    				<!--<button>确认收货</button>-->
	    	    			</td>
	    	    		</tr>
	    	    	</tbody>
	    	    </table>
	    	    <table id="2" style="display: none;">
	    	    	<thead>
	    	    		<tr>
	    	    			<th width="25%">订单号</th>
	    	    			<th width="">状态</th>
	    	    			<th>金额</th>
	    	    			<th width="25%">下单时间</th>
	    	    			<th>操作</th>
	    	    		</tr>
	    	    	</thead>
	    	    	<tbody>
	    	    		<tr>
	    	    			<td>
	    	    				<div class="top">
	    	    					<img src="img/595c55ab382b0.jpg" />
	    	    					<span>电吉他高级</span>
	    	    				</div>
	    	    				<p>订单号:06147521466235</p>
	    	    			</td>
	    	    			<td>
	    	    				<p>未付款</p>
	    	    				<p>未到货</p>
	    	    			</td>
	    	    			<td>&yen;150.00</td>
	    	    			<td>2017.12.19 8:05</td>
	    	    			<td>
	    	    				<!--<p><a href="">查看订单</a></p>-->
	    	    				<!--<button>确认收货</button>-->
	    	    			</td>
	    	    		</tr>
	    	    	</tbody>
	    	    </table>
	    	</div>
	    </div>
	    <!--会员页的主要内容结束-->
	    <script>
	    	$(function(){
	    		$(".hd h2 span").on("click",function(){
	    			$(this).addClass("active");
	    			$(this).siblings().removeClass("active");
	    			var index = $(this).index();
	    			$("table").hide();
	    			$("#"+index).show();
	    		});
	    		$("table button").on("click",function(){
	    			$(this).css({
	    				'background-color':'#fff',
	    				'color':'#29d0c9',
	    				'border':'1px solid #d1d1d1'
	    			})
	    		})
	    	})
	    </script>
	</body>
</html>

